<template>
  <div class="zl-attr-item">
    <div class="zl-attr-item-body" @click.stop="togglePanel">
      <span class="zl-attr-item__title">标记</span>
    </div>
    <div class="zl-label-panel" :class="{'show': panelShow}">
      <div class="zl-flex">
        <div class="zl-flex__title"> 大小 </div>
        <div class="zl-flex-1">
          <Slider v-model="size" :min="1" :max="50" @on-change="handleSizeChange"></Slider>
        </div>
      </div>
      <div class="zl-flex">
        <div class="zl-flex__title">显示</div>
        <div class="zl-flex-1">
          <Checkbox v-model="showSymbol" label="" @on-change="handleSizeChange"></Checkbox>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
      panelShow: false,
      size: 2,
      showSymbol: true
    }
  },
  props: {
    graphOptions: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  mounted () {
    document.addEventListener('click', this.outsideHide)
  },
  methods: {
    togglePanel() {
    	this.panelShow = !this.panelShow
    },
    outsideHide(event) {
      let t = event.target
      let isDrop = false
      while(t) {
        if (t.className && typeof t.className === 'string' && t.className.indexOf('zl-label-panel') !== -1) {
          isDrop = true
          break
        }
        t = t.parentNode
      }
      if (!isDrop) {
        this.panelShow = false
      }
    },
    handleSizeChange() {
      if (this.graphOptions.series) {
        let series = this.graphOptions.series
        for (let i = 0; i < series.length; i++) {
          const seriesItem = series[i];
          seriesItem.symbolSize = this.size
          seriesItem.showSymbol = this.showSymbol
        }
        this.$emit('changeSeries', series)
      }
    }
  },
  beforeDestroy () {
    document.removeEventListener('click', this.outsideHide)
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.zl-label-panel {
  position: absolute;
  right: 0;
  top: 30px;
  z-index: 9;
  border: 1px solid #ddd;
  padding: 3px 8px 3px 16px;
  background-color: #fff;
  width: 160px;
  line-height: 24px;
  display: none;
  &.show {
    display: block;
  }
  .zl-flex__title {
    padding-right: 10px;
  }
}
.zl-flex /deep/ .ivu-slider-wrap {
  margin: 10px 0;
}
</style>
